<template>
  <view class="contenter">
    <indextime @time="time"></indextime>
    <scroll-view  scroll-y="true" class="scroll-Y" @scrolltolower="onReachBottom">
      <view class="item u-flex" v-for="(data,index) in dataList" >
        <view v-if="index < 3" class="itemIndex">
          <image :src="`/static/icon/${index+1}.png`"></image>
        </view>
        <view v-else class="itemIndex">
          <view class="index">{{index+1}}</view>
        </view>
        <view class="img">
          <item-image  :img="data.image" :width="160" :height="160"  :fade="false"/>
        </view>
        <view class="cent">
          <view class="name">{{data.name}}</view>
          <view class="u-flex">
            <view class="num">已售{{data.num}}件</view>
            <view class="price">￥{{data.price}}</view>
          </view>
        </view>
      </view>
      <view class="loading_text" >
        <text>{{loadingText || '暂无数据'}}</text>
      </view>
    </scroll-view>

  </view>
</template>

<script>
import Indextime from "../../components/index/indexTime";
export default {
  name: "index",
  components: {Indextime},
  data(){
    return{
      loadingText:'',
      dataList:[],
      page : 1,
      limit:20,
      start_time:'',
      allpage:'',
      end_time:'',
      id:'',
    }
  },
  onLoad(option){

  },
  methods:{
    //筛选时间
    time(time){
      this.start_time = time.start_time
      this.end_time = time.end_time
      this.page = 1
      this.loadingText = ''
      this.dataList = []
      this.setData()
    },
    setData(){
      this.store = uni.getStorageSync('store')
      let form = {
        page:this.page,
        limit:this.limit,
        start_time:this.start_time,
        end_time:this.end_time,
        store_id:this.store.id
      }
      let that = this
      this.$api.goodRanking(form).then(res => {
        this.allpage = res.data.last_page
        that.dataList = [...that.dataList,...res.data.data]
      })
    },
    //上拉加载
    onReachBottom(){
      if(this.page>=this.allpage){
        this.loadingText="已经到底啦！"
        return ;
      }else{
        this.loadingText = '加载中....'
      }
      this.page ++
      this.setData()
    },
  }
}
</script>

<style scoped lang="scss">
  .item{
    height: 220rpx;
    background: #FFFFFF;
    margin-top: 20rpx;
    padding-right: 48rpx;
    box-sizing: border-box;
    padding-left: 32rpx;
    .img{
      margin-left: 20rpx;
      margin-right: 16rpx;
      image{
        width: 160rpx;
        height: 160rpx;
        border-radius: 12rpx;
      }
    }
    .itemIndex{
      width: 56rpx;
      height: 56rpx;
      image{
        width: 56rpx;
        height: 56rpx;
      }
      .index{
        width: 48rpx;
        height: 48rpx;
        background: #FFFFFF;
        border: 3rpx solid $uni-color-primary;
        border-radius: 50%;
        font-size: 28rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: $uni-color-primary;
        font-weight: 800;
      }
    }
    .cent{
      display: flex;
      height: 160rpx;
      width: 100%;
      justify-content: space-between;
      flex-direction:  column ;
      .name{
        font-size: 32rpx;
        font-weight: bold;
        color:$uni-text-color ;
      }
      .u-flex{
        justify-content: space-between;
      }
      .num{
        font-size: 28rpx;
        font-weight: 400;
        color:$uni-text-color-grey ;
      }
      .price{
        color: $uni-color-price;
        font-size: 42rpx;
        font-weight: 400;
      }
    }
  }

</style>